<template>
<div>
    <div class="upload_box">
        <div class="upload_component">
          <el-upload class="upload"
                drag 
                 ref="upload"
                 action="string"
                 :file-list="fileList"	
                 :auto-upload="false"	
                 :http-request="uploadFile"	
                 :on-change="handleChange"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="file"
                 multiple="multiple">	
                 <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
      </el-upload>
    <el-button type="primary" @click="onSubmit" style="display">保存</el-button>
        </div>
    </div>
    <div class="static_box">
        <div class="static_component">  
 <h1 style="text-align: center; position: flex;">经过分析，该控制流图的McCabe全复杂度为</h1>
</div>
    </div>
    <div class="roll_box">
        <div class="roll_component">
<nut-countup style="text-align: center; font-size: 24px;" :scrolling="true" :init-num='0' :end-num=this.customNumber :during="1"></nut-countup>
        </div>
 </div>
    </div>
</template>
<script>
module.exports = {
    data() {
        return {
            customNumber: 0, 
            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
        };
    },
    methods:{
//点击上传文件触发的额外事件,清空fileList
delFile :function () {
      this.fileList = [];
    },
    handleChange :function (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile :function (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove :function (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview :function (file) {
      console.log(file);
    },
    //保存按钮
    onSubmit :function() {
        console.log("保存文件")
        let formData = new FormData();
        formData.append("oomFile", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);
        axios.post("http://localhost:8080/api/CircleComplexity/circleComplexity", formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data.msg === "success") {
            this.customNumber = res.data.data
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })
    }
}
};
</script>